<template>
    <pre><code v-html="highlightedCode"></code></pre>
</template>

<script setup>
import { onMounted, ref, computed } from 'vue';

// 引入python代码展示相关的第三方库
import hljs from 'highlight.js/lib/core';
import python from 'highlight.js/lib/languages/python';
// import 'highlight.js/styles/default.css';
// import 'highlight.js/styles/atom-one-dark.css';
import 'highlight.js/styles/vs2015.css';
hljs.registerLanguage('python', python);

// 导出函数
defineExpose({ setConfig });

// code display
const pythonCode = ref('');
const highlightedCode = computed(() => {
    return hljs.highlight(pythonCode.value, { language: 'python' }).value;
});

function setConfig(logData) {
    if (!logData || logData.length == 0) {
        return;
    }
    pythonCode.value = logData;
}

onMounted(async () => {});
</script>

<style scoped>
pre {
    background: #1e1e1e;
    padding: 5px;
    overflow: auto;
    color: #dcdcdc;
    height: 100%;
    font-size: 16px;
    line-height: 1.5;
    box-sizing: border-box;
}
</style>
